<{assign var="tpl_page_title" value="装修案例"}>
<{include file="mobile/block/header.html"}> 
<!--<div class=" gs_search_box">
    <div class="gs_search">
        <form action="<{link ctl='mobile/case:items'}>" method="post">
            <input type="text" name="kw" class="lt txt" placeholder="输入你想看的装修美图"  value="<{$pager.sokw}>" />
            <input type="submit" value="搜美图" class="rt btn" />
            <div class="cl"></div>
        </form>
    </div>
</div> -->
<div id="search-bar">
	<ul class="search-bar_list">
		<{foreach $attr_values as $v}>
		<{if $v@index>2}><{break}><{/if}>
		<li class="list"><a href="#"><{if $attrs[$v.attr_id]}><{$attrs[$v.attr_id].title}><{else}><{$v.title}><{/if}><em></em></a></li>
		<{/foreach}>
	</ul>
	<div class="search-bar_pull"> <{foreach $attr_values as $v}>
		<div class="list_box">
			<ul>
				<li><a href="<{$v.link}>">不限</a></li>
				<{foreach $v['values'] as $vv}>
				<li><a title="<{$vv.title}>" href="<{$vv.link}>"><{$vv.title}></a></li>
				<{/foreach}>
			</ul>
		</div>
		<{/foreach}>
		<div class="mask_bg"></div>
	</div>
</div>
<section id="" class="page_center_box">
<div id="xgtContainer"><{foreach $items as $item}>
	<div class="case_aterfall_li"> <a href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"> <img src="<{$pager.img}>/<{$item.photo}>_thumb.jpg" />
		<p><{$item.title|cutstr:20}></p>
		</a> </div>
	<{/foreach}> </div>
<div class="page"><{$pager.pagebar}></div>

<script type="text/javascript">
$(document).ready(function () {
	/*轮播幻灯图开始*/
	$('.flexslider').flexslider({
		directionNav: true,
		pauseOnAction: false,
		/*slideshow: false,*/
		/*touch:true,*/
	});
	/*轮播幻灯图结束*/
	/*瀑布流效果开始*/
	(function(K, $){
	  var $container = $('#xgtContainer');
		  $container.imagesLoaded(function(){
			$container.masonry({itemSelector: '.case_aterfall_li'});
		}); 
	})(window.KT, window.jQuery);
	/*瀑布流效果结束*/
	/*头部下来分类开始*/
	$("#search-bar .search-bar_list .list").each(function(e){
		$(this).click(function(){
			if($(this).hasClass("on")){
				$(this).parent().find(".list").removeClass("on");
				$(this).removeClass("on");
				$(".mask_bg").hide();
				$("#search-bar .search-bar_pull").hide();
			}
			else{
				$(this).parent().find(".list").removeClass("on");
				$(this).addClass("on");
				$(".mask_bg").show();
				$("#search-bar .search-bar_pull").show();
			}
			$("#search-bar .search-bar_pull .list_box").each(function(i){
				if(e==i){
					$(this).parent().find(".list_box").hide();
					$(this).show();
				}
				else{
					$(this).hide();
				}
				$(this).find("li").click(function(){
					$(this).parent().find("li").removeClass("on");
					$(this).addClass("on");
					$(".mask_bg").hide();
					$("#search-bar .search-bar_pull").hide();
					$("#search-bar .search-bar_list .list").removeClass("on");
				});
			});
		});
	});
	/*头部下来分类开始*/
});
</script> 
<script type="text/javascript" src="<{$pager.res}>/script/jquery.masonry.min.js"></script> 
<script type="text/javascript">
//案例展示瀑布流效果
(function(K, $){
  var $container = $('#container');
      $container.imagesLoaded(function(){
        $container.masonry({itemSelector: '.case_aterfall_li'});
    }); 
})(window.KT, window.jQuery);
</script> 
<{include file="mobile/block/footer.html"}>